{#该页面在base.html基础上继承#}
{% extends 'visites/include/base.html' %}
{#引入static文件#}
{% load staticfiles %}
{#对应base.html里block内需要填入的内容#}
{% block content %}
<script src="{% static 'visites/js/jquery.min.js' %}"></script>
    <p hidden="hidden" >{% csrf_token %}</p>
    {#    base.html里的block从topbar之后开始，所以这里我们找到该页面topbar下面对应的标签#}
        <div class="page-content-wrapper">
            {% csrf_token %}
            <div class="container-fluid cookbook">
                <fieldset>
                    <legend>菜谱信息</legend>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">banner：</label>
                        <div class="col-sm-10">
                            <div class="m-b-30">
                                <img id="show" width="750" height="304" src="/static/visites/images/banner_upload.png">
                                <input  type="file" id="file" onchange="c()">
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">社区：</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="community_id">
                                {% for items in communityList %}
                                    <option value="{{ items.id }}">{{ items.name }}</option>
{#                                    <option>{{ items.name }}</option>#}
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">期数：</label>
                        <div class="col-sm-10 input-group">
                            <input class="form-control" type="number" min="1" id="period_number">
                            <span class="input-group-addon">期</span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">订购时间：</label>
                        <div class="col-sm-4 input-group">
                            <input class="form-control Order-start" id="example-datetime-local-input">
                        </div>
                        <span style="line-height: 38px">——</span>
                        <div class="col-sm-4 input-group">
                            <input class="form-control Order-end" id="example-datetime-local-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">配送时间：</label>
                        <div class="col-sm-4 input-group">
                            <input class="form-control send-start" id="example-date-input">
                        </div>
                        <span style="line-height: 38px">——</span>
                        <div class="col-sm-4 input-group">
                            <input class="form-control send-end">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">本期热推：</label>
                        <div class="col-sm-10 input-group">
                            <textarea class="form-control" id="hot"></textarea>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>本期菜单</legend>
                    <div class="card-body" id="menu-list">
                        <div class="item">
                            <h4 class="header-title">菜品：</h4>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">主图：</label>
                                <div class="col-sm-10">
                                    <img width="105" height="75">
                                    <input  type="file"  class="file-upload">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">名称：</label>
                                <div class="col-sm-10">
                                    <input class="form-control foodName" type="text">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">单价：</label>
                                <div class="input-group col-sm-10">
                                    <input class="form-control price" type="number" min="0">
                                    <span class="input-group-addon">￥</span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">备注：</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control remarks"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-info none-radius" id="dishAdd">增加菜品</button>
                </fieldset>
                <div class="text-center m-t-15">
                    <button type="button" class="btn waves-effect waves-light none-radius" id="submit">提交</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    <!--增加菜品-->
    $(document).ready(function(){
        $("#dishAdd").click(function(){
            $("#menu-list").append("<div class='item'>"
                +"<h4 class='header-title'>菜品：</h4>"

                +"<div class='form-group row'>"
                +"<label class='col-sm-2 col-form-label'>主图：</label>"

                +"<div class='col-sm-10'>"
                +"<img width='105' height='75'>"
                +"<input type='file' class='file-upload'>"
                +"</div>"

                +"</div>"

                +"<div class='form-group row'>"
                +"<label class='col-sm-2 col-form-label'>名称：</label>"
                +"<div class='col-sm-10'>"
                +"<input class='form-control foodName' type='text'>"
                +"</div>"
                +"</div>"

                +"<div class='form-group row'>"
                +"<label class='col-sm-2 col-form-label'>单价：</label>"
                +"<div class='input-group col-sm-10'>"
                +"<input class='form-control price' type='number' min='0'>"
                +"<span class='input-group-addon'>￥</span>"
                +"</div>"
                +"</div>"

                +"<div class='form-group row'>"
                +"<label class='col-sm-2 col-form-label'>备注：</label>"
                +"<div class='col-sm-10'>"
                +"<textarea class='form-control remarks'></textarea>"
                +"</div>"
                +"</div>"

                +"</div>"
            );
        })
    })
//    banner上传预览
    function c (){
        var r=new FileReader();
        f=document.getElementById('file').files[0];
        r.readAsDataURL(f);
        r.onload=function(e){
            document.getElementById('show').src=this.result;
        }
    }
    //    菜品主图上传预览
    $(function () {
        $(document).on('change','.file-upload',function (e) {
            var _this = $(this);
            var file = e.target.files[0] || e.dataTransfer.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function () {
                    _this.prev().attr("src", this.result);
                };
                reader.readAsDataURL(file);
            }
        })
    })

    </script>

    <script type="text/javascript">
    /*Banner上传至后台并返回图片的url*/
    $("#file").change(function(){
        var csrf = $("input[name='csrfmiddlewaretoken']").val();
        var formData=new FormData();
        formData.append("csrfmiddlewaretoken",csrf);
        formData.append('avatar', $("#file")[0].files[0]);  /*获取上传的图片对象*/
        $.ajax({
          url: 'uploadImage',
              type: 'POST',
              data: formData,
              contentType: false,
              processData: false,
              success: function (args) {
              $("#file").attr("link", args);
          }
        })
     });

     /*food上传至后台并返回图片的url*/
     $(".card-body").on('change','.file-upload',function(){
        var that = this;
        var csrf = $("input[name='csrfmiddlewaretoken']").val();
        var formData=new FormData();
        formData.append("csrfmiddlewaretoken",csrf);
        formData.append('avatar', $(this)[0].files[0]);  /*获取上传的图片对象*/
        $.ajax({
          url: 'uploadImage',
              type: 'POST',
              data: formData,
              contentType: false,
              processData: false,
              success: function (args) {
              $(that).attr("link", args);
          }
        })
     });
    {#js取date值带T#}
    function FormatTime(dataTime) {
        var time = dataTime.split(/[T+]/);
        var ftime = time[0] + " " + time[1];
        return ftime;
    }
    $("#submit").on('click',function() {
        var CookBook = {};
        var MenuFoodArray = [];

        var MenuFoodArr = $(".item");
        MenuFoodArr.each(function(index, element){
            var food = {};
            food['name'] = $(element).find('.foodName').val();
            food['price'] = $(element).find('.price').val();
            food['remarks'] = $(element).find('.remarks').val();
            food['image'] = $(element).find('.file-upload').attr("link");
            MenuFoodArray.push(food)
        });
        CookBook['community_id'] = $('#community_id').val();
        CookBook['community_name'] = $('#community_id option:selected').text();
        CookBook['period_number'] = '第'+$('#period_number').val()+'期';
        {#CookBook['order_time'] = $('.Order-start').val()+'--'+$('.Order-end').val();#}
        CookBook['order_time'] = FormatTime($('.Order-start').val())+'--'+ FormatTime($('.Order-end').val());
        CookBook['delivery_time'] = $('.send-start').val()+'--'+$('.send-end').val();
        CookBook['hot_push'] = $('#hot').val();
        CookBook['banner'] = $("#file").attr("link");
        CookBook['menu'] = MenuFoodArray;
        console.log(CookBook);
        $.ajax({
                cache: false,
                method : "POST",
                url : "insertMenu",
                async : false,
                dataType : "json",
                processData:false,
                data: JSON.stringify(CookBook),
                success : function(data) {
                    if(data=1){
                        alert("上传成功!");
                        window.location.href = 'add-menu'
                    }else{
                        alert("上传失败！");
                    }
                }
            });
    })
    </script>
{#    为了加快前端页面的加载速度我们一般把JS引入写到页面的最底端#}
{% endblock %}